ON／OFF 已經有清楚顏色，今天要讓遠端按鈕看起來真的可以操作。

前一天完成了狀態區的文字大小與顏色，管理畫面已經能清楚顯示 OFF 或 ON。

今天只改善按鈕外觀，加入尺寸、背景、圓角、滑鼠移入與按下回饋，先完成靜態管理畫面。

按鈕要看得出可以操作

控制介面的按鈕需要足夠大的點擊範圍，文字與背景要有清楚對比，游標移到上方時也應顯示可點擊狀態。

本專案已為按鈕設定 id="toggle-btn"，因此使用 #toggle-btn 選擇器即可只修改這一顆按鈕，不影響其他頁面元素。

建立按鈕基本樣式

在 assets/style.css 加入以下樣式。

/* 本日新增 */
#toggle-btn {
  font-size: 1.2rem;
  padding: 14px 40px;
  background: #0076d6;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

padding 增加文字周圍的內距，前一個數值控制上下，後一個控制左右，按鈕因此具有較大的操作區域。

background 與 color 分別設定藍色背景與白色文字，border: none 移除預設邊框，border-radius 建立圓角，cursor: pointer 則讓滑鼠游標顯示為可點擊狀態。

transition 讓變化不會太突兀

transition: background 0.15s 表示背景色變化會在短時間內完成，而不是瞬間跳換，這項效果會用在接下來的 hover 與 active 狀態。

過渡只影響外觀，不會延遲 JavaScript 點擊事件，也不代表系統正在等待 MCU，後續遠端控制是否成功仍必須以真正狀態回報為準。

按鈕的 active 效果只在使用者按住時短暫出現，放開後恢復原本顏色，這種回饋表示瀏覽器接收到操作動作，不等於 LED 已完成切換，因此不應在 CSS 中設計永久保持的啟用狀態。

加入懸停與按下效果

接著建立兩個虛擬類別。

/* 本日新增 */
#toggle-btn:hover {
  background: #005daa;
}

#toggle-btn:active {
  background: #004080;
}

:hover 在滑鼠移到按鈕上時生效，背景會變深，:active 則在按住滑鼠鍵的瞬間使用更深色，讓使用者知道點擊動作已被瀏覽器接住。

這兩個效果只代表前端操作回饋，現在按下按鈕後仍不會切換 LED，也不應自行改變 ON／OFF 文字。

執行並觀察三種外觀

重新整理頁面後，按鈕應具有藍色背景、白色文字與圓角，滑鼠移入時顏色變深，按住時再變得更深，放開後回到懸停狀態。

若按鈕完全沒有樣式，先檢查 HTML 的 id="toggle-btn"，若只有 hover 沒有效果，則確認選擇器中的冒號與名稱是否正確。

可嘗試縮放瀏覽器畫面，按鈕文字與狀態區會依 rem 單位保持相對比例，版面仍維持中央排列。

也要確認滑鼠移出按鈕後背景回到原色，按下與懸停樣式若無法恢復，應檢查選擇器是否誤寫成一般 class，或大括號是否讓規則套用到其他元素。

靜態管理畫面完成

到目前為止，HTML 已建立標題、狀態與按鈕，CSS 也完成背景、置中、狀態色彩與按鈕回饋，頁面的靜態外觀已經齊全。

驗收時應確認按鈕在一般、懸停與按下三種狀態下文字都清楚可讀，不能因背景變深而失去對比。

但所有內容仍是固定的 OFF，按鈕只有視覺反應，尚未有程式取得元素或接收點擊，下一階段要把瀏覽器從靜態文件變成可執行事件的前端。

本篇完成內容

• 設定按鈕字體、內距與背景。
• 加入圓角與可點擊游標。
• 使用 :hover 與 :active 提供操作回饋。
• 完成智慧路口的靜態管理畫面。

現在靜態管理畫面已經完成，但 JavaScript 還不知道狀態區與按鈕在哪裡，下一篇要讓前端程式先找到這兩個 DOM 元素。

下一篇｜用 JavaScript 增加互動性